import React from 'react';
import reqwest from 'reqwest';
import classnames from 'classnames';
import Layout from 'components/layout';
import css from './index.less';
import { Input, Button, Col } from 'antd';
const InputGroup = Input.Group;
import { observer, inject, action } from 'mobx-react';

@inject('store')
@observer
class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      liveEnter: '',
      isLiveEdit: false,
      music: '',
      isMusicEdit: false
    };
    this.lastLive = null;
    this.lastMusic = null;
  }

  onInputChange(value, type) {
    //console.log(value, type);
    this.setState((state) => {
      state[type] = value;
    });
  }

  toEdit(type) {
    //console.log
    if( type === 1) {
      this.setState({
        isLiveEdit: true
      });
      this.lastLive = this.state.liveEnter;
    }
    if( type === 2) {
      this.setState({
        isMusicEdit: true
      });
      this.lastMusic = this.state.music;
    }
  }

  onOk(type) {
    const { store = {} } = this.props;
    if( type === 1) {
      store.editOther(4, this.state.liveEnter);
      this.setState({
        isLiveEdit: false
      });
      this.lastLive = null;
    }
    if( type === 2) {
      store.editOther(6, this.state.music);
      this.setState({
        isMusicEdit: false
      });
      this.lastMusic = null;
    }
  }

  onChannel(type) {
    if( type === 1) {
      this.setState({
        isLiveEdit: false,
        liveEnter: this.lastLive
      });
      this.lastLive = null;
    }
    if( type === 2) {
      this.setState({
        isMusicEdit: false,
        music: this.lastMusic
      });
      this.lastMusic = null;
    }
  }

  componentWillReceiveProps(nextProps) {
    console.log('nextProps', nextProps);
    this.setState({
      liveEnter: nextProps.store.liveEnter,
      music: nextProps.store.music
    })
  }


  componentDidMount() {

  }

  render() {
    const cls = classnames([css.layout]);
    const { liveEnter, isLiveEdit, music, isMusicEdit } = this.state;
    console.log(this.props.store);
    console.log( liveEnter, music );
    return (
      <Layout selected="4" >
        <div className={cls}>

          <div>
            <h5>直播链接</h5>
            <form action="">
              <InputGroup className={css.inuptBox} size="large">
                <Col offset={6}  span={12}>
                  <Input disabled={!isLiveEdit} value={liveEnter.length ? liveEnter : this.props.store.liveEnter} onChange={e => {this.onInputChange(e.target.value, 'liveEnter')}}/>
                </Col>
              </InputGroup>
              <InputGroup className={css.inuptBox} size="large">
                <Col offset={6} span={12}>
                  { isLiveEdit && <Button onClick={this.onOk.bind(this, 1)} type="primary" ghost>确认</Button> }
                  { isLiveEdit && <Button onClick={this.onChannel.bind(this, 1)} type="danger" ghost>取消</Button> }
                  { !isLiveEdit && <Button onClick={this.toEdit.bind(this, 1)}>修改</Button> }
                </Col>
              </InputGroup>
            </form>

          </div>
          <div>
            <h5>背景音乐地址</h5>

            <form action="">
              <InputGroup className={css.inuptBox} size="large">
                <Col offset={6}  span={12}>
                  <Input disabled={!isMusicEdit} value={music.length ? music : this.props.store.music} onChange={e => {this.onInputChange(e.target.value, 'music')}}/>
                </Col>
              </InputGroup>
              <InputGroup className={css.inuptBox} size="large">
                <Col offset={6} span={12}>
                  { isMusicEdit && <Button onClick={this.onOk.bind(this, 2)} type="primary" ghost>确认</Button> }
                  { isMusicEdit && <Button onClick={this.onChannel.bind(this, 2)} type="danger" ghost>取消</Button> }
                  { !isMusicEdit && <Button onClick={this.toEdit.bind(this, 2)}>修改</Button> }
                </Col>
              </InputGroup>
            </form>

          </div>
        </div>
      </Layout>
    );
  }
}
export default Home;
